<template>
    <div >
        <!--       style="width: 200px;min-height: calc(100vh - 80px)" -->
        <el-menu

                style="width: 200px;min-height: calc(100vh - 80px)"
                active-text-color="#ffd04b"
                class="el-menu-vertical-demo"
                :default-active=data.path
                :default-openeds="['1']"
                router
        >
            <el-sub-menu index="1">
                <template #title>
                    <el-icon><grid /></el-icon>
                    <span>系统管理</span>

                </template>
                <el-menu-item index="/pieChart"><el-icon><pie-chart /></el-icon>总览</el-menu-item>
                <el-menu-item index="/home"><el-icon><avatar /></el-icon>用户管理</el-menu-item>
                <el-menu-item index="/files"><el-icon><files /></el-icon>文件管理</el-menu-item>
                <el-menu-item index="/article"><el-icon><document /></el-icon>文章管理</el-menu-item>
            </el-sub-menu>


            <el-sub-menu index="2">
            <template #title>
                <el-icon><location /></el-icon>
                <span>联系我们</span>
            </template>
            <el-menu-item index="/im"><el-icon><message /></el-icon>留言</el-menu-item>
            <el-menu-item index="/contact"><el-icon><home-filled /></el-icon>电话/地址</el-menu-item>
        </el-sub-menu>


        </el-menu>

    </div>
</template>

<script setup>
    import {
        Document,
        Menu as IconMenu,
        Location,
        Setting,Avatar,Files,Message,HomeFilled,Grid,PieChart
    } from '@element-plus/icons-vue'
    import {ref, reactive, onMounted,watch} from 'vue'

    import { useRouter } from 'vue-router';
    const data = reactive(
        {
           path: useRouter().currentRoute.value.path
        }
    )


    watch(
        () => data.path,
        (count, prevCount) => {
            data.path = count
        }
    );
</script>

<style scoped>

</style>